<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" href="common/css/all.min.css">
    <link href="plugs/layui/css/layui.css" rel="stylesheet"/>
    <link href="common/css/index.css" rel="stylesheet"/>
</head>
<body>
<!-- 顶部导航 -->
<div class="header" th:include="include :: header">
<!--    <button class="back-btn"><i class="fas fa-arrow-left"></i> 返回</button>-->
<!--    <div class="title">项目日程</div>-->
<!--    <button class="exit-btn">退出 <i class="fas fa-sign-out-alt"></i></button>-->
</div>

<!-- 内容区域 -->
<div class="content">
    <div class="project-list">
        <!-- 已过期的项目 -->
<!--        <div class="project-card past">-->
<!--            <div class="project-header">-->
<!--                <div class="project-name">季度总结会议</div>-->
<!--            </div>-->
<!--            <div class="project-info">-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-calendar date-location-icon"></i>-->
<!--                    <span>2023年10月10日 八月廿六</span>-->
<!--                </div>-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-map-marker-alt date-location-icon"></i>-->
<!--                    <span>总部大楼 3层会议室</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="project-description">总结第三季度工作成果，分析业务数据，制定第四季度工作计划和目标。</div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 今天的项目 &ndash;&gt;-->
<!--        <div class="project-card today">-->
<!--            <div class="project-header">-->
<!--                <div class="project-name">产品发布会</div>-->
<!--            </div>-->
<!--            <div class="project-info">-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-calendar date-location-icon"></i>-->
<!--                    <span>2023年10月17日 九月初三</span>-->
<!--                </div>-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-map-marker-alt date-location-icon"></i>-->
<!--                    <span>国际会展中心 A厅</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="project-description">发布新一代智能产品，邀请媒体和合作伙伴参加，展示产品创新功能和技术优势。</div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 未到时间的项目 &ndash;&gt;-->
<!--        <div class="project-card future">-->
<!--            <div class="project-header">-->
<!--                <div class="project-name">团队建设活动</div>-->
<!--            </div>-->
<!--            <div class="project-info">-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-calendar date-location-icon"></i>-->
<!--                    <span>2023年10月20日 九月初六</span>-->
<!--                </div>-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-map-marker-alt date-location-icon"></i>-->
<!--                    <span>西山度假村</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="project-description">组织团队户外拓展活动，增强团队凝聚力，促进跨部门沟通与合作。</div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 另一个未到时间的项目 &ndash;&gt;-->
<!--        <div class="project-card future">-->
<!--            <div class="project-header">-->
<!--                <div class="project-name">技术培训研讨会</div>-->
<!--            </div>-->
<!--            <div class="project-info">-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-calendar date-location-icon"></i>-->
<!--                    <span>2023年10月25日 九月十一</span>-->
<!--                </div>-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-map-marker-alt date-location-icon"></i>-->
<!--                    <span>创新中心 培训室A</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="project-description">关于最新前端开发框架和工程化实践的深度培训，提升团队技术水平。</div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 另一个已过期的项目 &ndash;&gt;-->
<!--        <div class="project-card past">-->
<!--            <div class="project-header">-->
<!--                <div class="project-name">客户洽谈会</div>-->
<!--            </div>-->
<!--            <div class="project-info">-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-calendar date-location-icon"></i>-->
<!--                    <span>2023年10月8日 八月廿四</span>-->
<!--                </div>-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-map-marker-alt date-location-icon"></i>-->
<!--                    <span>客户公司会议室</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="project-description">与重要客户洽谈合作细节，展示解决方案，讨论项目实施计划。</div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 另一个未到时间的项目 &ndash;&gt;-->
<!--        <div class="project-card future">-->
<!--            <div class="project-header">-->
<!--                <div class="project-name">年度战略规划</div>-->
<!--            </div>-->
<!--            <div class="project-info">-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-calendar date-location-icon"></i>-->
<!--                    <span>2023年11月5日 九月廿二</span>-->
<!--                </div>-->
<!--                <div class="project-date-location">-->
<!--                    <i class="fas fa-map-marker-alt date-location-icon"></i>-->
<!--                    <span>总部大楼 战略会议室</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="project-description">制定下一年度公司发展战略，分析市场趋势，确定业务重点和发展方向。</div>-->
<!--        </div>-->
    </div>
</div>

<!-- 底部导航 -->
<div class="footer" th:include="include :: footer('index')"></div>

<form action="" class="layui-form" style="display: none" lay-filter="add-form" id="add-form">
    <input type="hidden" id="id" name="id" value="">
    <div class="layui-form-item">
        <input type="text" name="remark" id="remark" placeholder="备注" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-item">
        <input type="checkbox" name="type" id="type" value="1" checked lay-skin="switch" lay-filter="switchType" title="农历|新历">
    </div>
    <div class="layui-form-item">
        <input type="text" name="birthday" readonly class="layui-input" id="birthday" placeholder="yyyy-MM-dd">
    </div>
    <!--    <div class="layui-form-item">-->
    <!--        <div class="layui-input-block">-->
    <!--            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="modifyBirthday();">保存</button>-->
    <!--            <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="removeBirthday();">删除</button>-->
    <!--            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="layer.closeAll();">关闭</button>-->
    <!--        </div>-->
    <!--    </div>-->
</form>

<script src="common/js/jquery.min.js"></script>
<script src="plugs/layui/layui.js"></script>
<script src="common/js/common.js"></script>
<script>
    // var lunar = chineseLunar.solarToLunar(new Date(2023, 6-1, 26));
    // var lunar1 = chineseLunar.solarToLunar(new Date(2023, 6-1, 26));
    // console.log(chineseLunar.format(lunar, 'YMD'));     //一九八二年腊月十六

    // 初始加载内容
    loadFile();

    /**
     * 获取文件列表
     */
    function loadFile() {
        $.ajax({
            url:'/api/listData',
            type:"get",
            dataType:'json',
            async: false,
            success:function(result){
                if (result.code === 200){
                    let content = '';
                    let data = result.data;
                    for (let dataKey in data) {
                        let mm = '生日倒计时'+data[dataKey].days+'天';
                        let cc = 'future'
                        if (data[dataKey].passFlag){
                            mm = '生日已过';
                            cc = 'past'
                        }else if (data[dataKey].days === 0){
                            mm = '今天生日';
                            cc = 'today';
                        }


                        content += '<div class="project-card '+cc+'" data-id="'+data[dataKey].id+'" onclick="addBirthday(this)">\n' +
                            '            <div class="project-header">\n' +
                            '                <div class="project-name remark-li">'+data[dataKey].remark+'</div>\n' +
                            '            </div>\n' +
                            '            <div class="project-info">\n' +
                            '                <div class="project-date-location">\n' +
                            // '                    <i class="fas fa-calendar date-location-icon"></i>\n' +
                            '                    <span class="birthday-li" data-date="'+data[dataKey].birthday+'">'+data[dataKey].birthdayLabel+'<label class="type">'+data[dataKey].type+'</label></span>\n' +
                            '                </div>\n' +
                            '                <div class="project-date-location">\n' +
                            '                    <span>今年'+data[dataKey].age+'岁</span>\n' +
                            '                </div>\n' +
                            '            </div>\n' +
                            '            <div class="project-description">'+mm+'</div>\n' +
                            '        </div>';
                    }
                    $(".project-list").append(content);
                }
            }
        });
    }

</script>

<script>
    var form;
    /**
     * 添加生日
     */
    function addBirthday(target) {
        // 设置参数
        let id = $(target).attr("data-id");
        let remark = $(target).find(".remark-li").html();
        let birthday = $(target).find(".birthday-li").attr("data-date");
        let type = $(target).find(".type").html();
        if (type === '农历'){
            type = '1';
        }else {
            type = '';
        }
        form.val("add-form", {
            "id": id
            ,"remark": remark
            ,"birthday": birthday
            ,"type": type
        });

        layer.open({
            closeBtn: 1,
            type: 1,
            title:'添加生日',
            btn:['保存', '删除', '关闭'],
            area: ['90%', '500'],
            btnAlign: 'c',
            content: $("#add-form"),
            yes: function () {
                modifyBirthday();
            },
            btn2: function (index) {
                layer.confirm('是否删除当前记录？', {icon: 3, title: '温馨提示'}, function (index) {
                    removeBirthday();
                })
            },
            btn3: function (index) {
                layer.close(index);
            }
        })
    }

    /**
     * 删除生日
     */
    function removeBirthday() {
        let data = form.val('add-form');
        $.ajax({
            url:'/api/removeBirthday',
            data: data,
            type:"post",
            dataType:'json',
            success:function(result){
                if (result.code === 200){
                    layer.msg(result.msg, {icon:1, time:1000}, function () {
                        layer.closeAll();
                        window.location.reload();
                    });
                }else {
                    layer.msg(result.msg, {icon:2});
                }
            }
        });
    }

    /**
     * 保存生日
     * @returns {boolean}
     */
    function modifyBirthday() {
        let data = form.val('add-form');
        let remark = data['remark'];
        if (remark === ''){
            layer.msg('请输入备注', {icon: 2, time: 1000});
            return false;
        }
        let type = data['type'];
        if (type === '1'){
            // 农历
            data['type'] = '2'
        }else {
            // 新历
            data['type'] = '1'
        }
        let birthday = data['birthday'];
        if (birthday === ''){
            layer.msg('请选择生日', {icon: 2, time: 1000});
            return false;
        }
        $.ajax({
            url:'/api/saveBirthday',
            data: data,
            type:"post",
            dataType:'json',
            success:function(result){
                if (result.code === 200){
                    layer.msg(result.msg, {icon:1, time:1000}, function () {
                        layer.closeAll();
                        window.location.reload();
                    });
                }else {
                    layer.msg(result.msg, {icon:2});
                }
            }
        });
    }

    layui.use(['form', 'laydate'], function(){
        var $ = layui.$;
        form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#birthday'
        });
    });
</script>
</body>
</html>